<template>
	<view class="overflow-hidden  pt-4 px-8 text-999">
		<view class="flex overflow-x-scroll" :class='props.fixed?"flex-x-space-around":""'
			style="scrollbar-height: none;">
			<view v-for="(item,index) in props.list" :key='index'>
				<view class="px-12 p-8" :class="props.modelValue==item[props.field]?'line fw-bold text-white' : ''"
					@click="changeCate(item,index)">
					<text class="fs-15 text-nowrap ">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const emit = defineEmits(['change', 'update:modelValue'])
	const props = defineProps({
		modelValue: {
			default: '',
			type: [Number, String]
		},
		list: {
			default: [],
			type: Array
		},
		fixed: {
			default: false,
			type: Boolean
		},
		field: {
			default: 'value',
			type: String
		}
	})
	const changeCate = (e, index) => {
		emit('update:modelValue', e[props.field])
		emit('change', e)
	}
</script>

<style>
	.line {
		background: linear-gradient(90deg, rgba(93.00000205636024, 51.00000075995922, 254.00000005960464, 1), rgba(15.000000055879354, 221.00000202655792, 246.0000005364418, 1)) ;
		background-size: 50% 6rpx;
		background-repeat: no-repeat;
		background-position: bottom;
	}
</style>